<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  width: {
    type: Number,
    default: 927
  },
  height: {
    type: Number,
    default: 360
  },
  data: {
    type: Array,
    default: () => []
  }
})

// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x - 9, shape.y - 9]
    const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
  }
})

// 绘制右侧面
const CubeRight = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x, shape.y]
    const c2 = [xAxisPoint[0], xAxisPoint[1]]
    const c3 = [xAxisPoint[0] + 13, xAxisPoint[1] - 6]
    const c4 = [shape.x + 13, shape.y - 6]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  }
})

// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0
  },
  buildPath: function (ctx, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + 13, shape.y - 6]
    const c3 = [shape.x + 4, shape.y - 15]
    const c4 = [shape.x - 9, shape.y - 9]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  }
})

// 注册三个面图形
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)

// 最大值数据
const MAX = [50, 50, 50, 50, 50]
// 第一组数据（底部）
const VALUE1 = props.data[1]
// 第二组数据（顶部）
// 计算两组数据总和
const Y_AXIS_UNIT = '吨'

const option = {
  backgroundColor: 'transparent',
  legend: {
    show: false,
    tooltip: {
      show: true
    },
    data: ['储备粮', '贸易粮'],
    top: '0%',
    right: '8%',
    icon: 'circle',
    itemWidth: 11,
    itemHeight: 11,
    textStyle: {
      color: '#fff',
      fontSize: '16rem'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      return params[0].name + '<br/>' + params[1].marker + ' 储备粮: ' + params[1].value + '<br/>' + params[2].marker + ' 贸易粮: ' + params[2].value
    }
  },
  graphic: [
    {
      type: 'text',
      style: {
        text: '单位：' + Y_AXIS_UNIT,
        fontSize: '16rem',
        fill: 'rgba(0, 209, 229, 1)',
        fontFamily: 'dt'
      }
    }
  ],
  grid: {
    left: 0,
    right: '10rem',
    bottom: '0rem',
    top: '30rem',
    containLabel: false
  },
  xAxis: {
    type: 'category',
    data: props.data[0],
    // 关键修改1：隐藏X轴线
    axisLine: {
      show: false, // 从true改为false，隐藏X轴轴线
      lineStyle: {
        color: 'white'
      }
    },
    offset: 5,
    // 关键修改2：隐藏X轴刻度线（已为false，保持不变）
    axisTick: {
      show: false, // 刻度线不可见
      length: 9,
      alignWithLabel: false,
      lineStyle: {
        color: 'transparent' // 刻度线颜色设为透明，确保不可见
      }
    },
    // 保留刻度文字（保持可见）
    axisLabel: {
      show: true, // 刻度文字正常显示
      fontSize: '16rem',
      fontFamily: 'sr',
      color: 'rgba(0, 209, 229, 1)'
    }
  },
  yAxis: {
    min: 0,
    max: 50,
    splitLine: {
      show: false, // 从true改为false，隐藏横向网格线
      lineStyle: {
        type: 'dashed',
        color: 'rgba(255,255,255,0.1)'
      }
    },
    type: 'value',
    axisLine: {
      show: false,
      lineStyle: {
        color: 'white'
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      fontFamily: 'dt',
      color: 'rgba(0, 209, 229, 1)',
      fontSize: '16rem'
    },
    boundaryGap: ['20%', '20%']
  },
  series: [
    // 背景参考柱（最大值）
    {
      type: 'custom',
      renderItem: function (params, api) {
        const centerX = api.coord([api.value(0), 0])[0]
        const leftOffset = 9
        const rightOffset = 13
        const left = centerX - leftOffset
        const right = centerX + rightOffset
        const yTop = api.coord([api.value(0), api.value(1)])[1]
        const yBottom = api.coord([api.value(0), 0])[1]

        return {
          type: 'rect',
          shape: {
            x: left,
            y: yTop,
            width: right - left,
            height: yBottom - yTop
          },
          style: {
            fill: 'rgba(0, 126, 255, .2)'
          }
        }
      },
      data: MAX
    },
    // 第一组数据（底部）
    {
      type: 'custom',
      name: '储备粮',
      itemStyle: {
        color: 'rgba(0, 126, 255, 1)'
      },
      renderItem: (params, api) => {
        const location = api.coord([api.value(0), api.value(1)])
        const color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(8, 53, 122, 1)'
          },
          {
            offset: 0.9,
            color: 'rgba(55, 178, 244, 1)'
          }
        ])
        return {
          type: 'group',
          children: [
            {
              type: 'CubeLeft',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            },
            {
              type: 'CubeRight',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            },
            {
              type: 'CubeTop',
              shape: {
                api,
                xValue: api.value(0),
                yValue: api.value(1),
                x: location[0],
                y: location[1],
                xAxisPoint: api.coord([api.value(0), 0])
              },
              style: {
                fill: color
              }
            }
          ]
        }
      },
      data: VALUE1
    }
  ]
}

const echart = ref()

onMounted(() => {
  const e = echarts.init(echart.value)
  e.setOption(option)
})
</script>

<template>
  <div
    ref="echart"
    :style="{
      width: width + 'rem',
      height: height + 'rem'
    }"
  ></div>
</template>
